
// 导出一个 组件 的对象，带路由
export default {
  template: `
    <div class="common-layout">
      <el-container>
        <el-header>CDN 使用状态</el-header>
        <el-container>
          <el-aside width="200px">
            <el-menu
              :default-active="1"
              class="el-menu-vertical-demo"
              active-text-color="#ffd04b"
              background-color="#545c64"
              default-active="2"
              text-color="#fff"
              @open="handleOpen"
              @close="handleClose"
              router
            >
              <el-menu-item index="/company">
                <template #title>公司介绍</template>
              </el-menu-item>
              <el-menu-item index="/about">
                <template #title>关于我们</template>
              </el-menu-itemu>
            </el-menu>
          </el-aside>
          <el-main>
            <hr>
            <!-- 路由出口 -->
            <!-- 路由匹配到的组件将渲染在这里 -->
            <router-view></router-view>
          </el-main>
        </el-container>
      </el-container>
    </div>
  `,
  setup(props) {
    const person = reactive({
      name: 'composition API演示'
    })

    return {
      person
    }
  }
}